import React, { useState } from 'react';
import { 
  Users, FileText, Monitor, ArrowLeft, ChevronLeft, ChevronRight,
  LayoutDashboard, Check
} from 'lucide-react';

// 导入三个主要组件
import WorkbenchUserScenarios from './UserScenarios.jsx';
import WorkbenchPRDDesign from './PRDDesign.jsx';
import WorkbenchPrototype from './Prototype/WorkbenchPrototype.jsx';

const WorkbenchMain = ({ onBack }) => {
  const [currentSection, setCurrentSection] = useState('scenarios');

  // 导航配置
  const sections = [
    {
      id: 'scenarios',
      name: '用户场景与用例',
      shortName: '用户场景',
      icon: Users,
      description: '目标用户、核心场景、业务流程分析',
      color: 'emerald'
    },
    {
      id: 'prd',
      name: 'PRD设计',
      shortName: 'PRD设计',
      icon: FileText,
      description: '产品需求文档、技术规范、接口设计',
      color: 'blue'
    },
    {
      id: 'prototype',
      name: '原型',
      shortName: '原型',
      icon: Monitor,
      description: '完整的交互式前端页面流程',
      color: 'purple'
    }
  ];

  // 处理导航
  const handleNavigate = (sectionId) => {
    setCurrentSection(sectionId);
  };

  // 获取当前section的信息
  const getCurrentSection = () => {
    return sections.find(s => s.id === currentSection);
  };

  // 获取前一个和后一个section
  const getCurrentIndex = () => {
    return sections.findIndex(s => s.id === currentSection);
  };

  const getPrevSection = () => {
    const currentIndex = getCurrentIndex();
    return currentIndex > 0 ? sections[currentIndex - 1] : null;
  };

  const getNextSection = () => {
    const currentIndex = getCurrentIndex();
    return currentIndex < sections.length - 1 ? sections[currentIndex + 1] : null;
  };

  // 渲染当前section的组件
  const renderCurrentSection = () => {
    switch (currentSection) {
      case 'scenarios':
        return <WorkbenchUserScenarios onNavigate={handleNavigate} />;
      case 'prd':
        return <WorkbenchPRDDesign onNavigate={handleNavigate} />;
      case 'prototype':
        return <WorkbenchPrototype onNavigate={handleNavigate} />;
      default:
        return <WorkbenchUserScenarios onNavigate={handleNavigate} />;
    }
  };

  const getStepStatus = (index) => {
    const currentIndex = getCurrentIndex();
    if (index < currentIndex) return 'completed';
    if (index === currentIndex) return 'current';
    return 'pending';
  };

  const getStepColorClasses = (color, status) => {
    if (status === 'completed') {
      return 'bg-emerald-500 text-white border-emerald-500';
    }
    if (status === 'current') {
      const colorMap = {
        emerald: 'bg-emerald-500 text-white border-emerald-500',
        blue: 'bg-blue-500 text-white border-blue-500',
        purple: 'bg-purple-500 text-white border-purple-500'
      };
      return colorMap[color] || 'bg-gray-500 text-white border-gray-500';
    }
    return 'bg-white text-gray-400 border-gray-200';
  };

  const getTabColorClasses = (color, status) => {
    if (status === 'completed') {
      return 'border-emerald-500 text-emerald-600 bg-emerald-50';
    }
    if (status === 'current') {
      const colorMap = {
        emerald: 'border-emerald-500 text-emerald-600 bg-emerald-50',
        blue: 'border-blue-500 text-blue-600 bg-blue-50',
        purple: 'border-purple-500 text-purple-600 bg-purple-50'
      };
      return colorMap[color] || 'border-gray-500 text-gray-600 bg-gray-50';
    }
    return 'border-transparent text-gray-500 hover:text-gray-700';
  };

  // 如果是原型页面，使用特殊的全屏布局
  if (currentSection === 'prototype') {
    return (
      <div className="h-screen flex flex-col">
        {/* 简化的顶部导航 - 原型页面 */}
        <header className="bg-white/95 backdrop-blur-sm border-b border-gray-200/60 z-50 flex-shrink-0">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            {/* 简化的顶部栏 */}
            <div className="flex items-center justify-between py-3">
              <div className="flex items-center space-x-4">
                <button
                  onClick={onBack}
                  className="flex items-center text-gray-500 hover:text-gray-700 transition-colors group"
                >
                  <ArrowLeft className="h-4 w-4 mr-1 group-hover:-translate-x-0.5 transition-transform" />
                  <span className="text-sm font-medium">返回功能中心</span>
                </button>
                
                <div className="flex items-center space-x-2 text-gray-300">
                  <span>/</span>
                </div>
                
                <div className="flex items-center space-x-3">
                  <div className="p-1.5 bg-purple-100 rounded-lg">
                    <Monitor className="h-4 w-4 text-purple-600" />
                  </div>
                  <div>
                    <h1 className="text-lg font-bold text-gray-900">ESG工作台设计 - 原型</h1>
                  </div>
                </div>
              </div>

              {/* 导航快捷键 */}
              <div className="flex items-center space-x-2">
                {getPrevSection() && (
                  <button
                    onClick={() => handleNavigate(getPrevSection().id)}
                    className="inline-flex items-center text-gray-600 hover:text-gray-900 px-3 py-1.5 rounded-lg hover:bg-gray-50 transition-colors text-sm"
                  >
                    <ChevronLeft className="h-4 w-4 mr-1" />
                    <span>{getPrevSection().shortName}</span>
                  </button>
                )}
                
                <div className="text-sm text-gray-500 px-2">
                  {getCurrentIndex() + 1} / {sections.length}
                </div>
                
                {getNextSection() && (
                  <button
                    onClick={() => handleNavigate(getNextSection().id)}
                    className="inline-flex items-center text-gray-600 hover:text-gray-900 px-3 py-1.5 rounded-lg hover:bg-gray-50 transition-colors text-sm"
                  >
                    <span>{getNextSection().shortName}</span>
                    <ChevronRight className="h-4 w-4 ml-1" />
                  </button>
                )}
              </div>
            </div>
          </div>
        </header>

        {/* 原型内容区域 - 占用剩余全部空间 */}
        <main className="flex-1 overflow-hidden">
          <WorkbenchPrototype onNavigate={handleNavigate} />
        </main>
      </div>
    );
  }

  // 非原型页面使用原来的布局
  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-white">
      {/* 简化的顶部导航 */}
      <header className="bg-white/80 backdrop-blur-sm border-b border-gray-200/60 sticky top-0 z-40">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          {/* 面包屑和标题行 */}
          <div className="flex items-center justify-between py-4">
            <div className="flex items-center space-x-4">
              <button
                onClick={onBack}
                className="flex items-center text-gray-500 hover:text-gray-700 transition-colors group"
              >
                <ArrowLeft className="h-4 w-4 mr-1 group-hover:-translate-x-0.5 transition-transform" />
                <span className="text-sm font-medium">返回功能中心</span>
              </button>
              
              <div className="flex items-center space-x-2 text-gray-300">
                <span>/</span>
              </div>
              
              <div className="flex items-center space-x-3">
                <div className="p-2 bg-blue-100 rounded-lg">
                  <LayoutDashboard className="h-5 w-5 text-blue-600" />
                </div>
                <div>
                  <h1 className="text-xl font-bold text-gray-900">ESG工作台设计</h1>
                  <p className="text-sm text-gray-500">当前: {getCurrentSection().name}</p>
                </div>
              </div>
            </div>

            {/* 步骤进度指示器 */}
            <div className="hidden md:flex items-center space-x-2">
              {sections.map((section, index) => {
                const status = getStepStatus(index);
                const Icon = section.icon;
                
                return (
                  <React.Fragment key={section.id}>
                    <div className="flex flex-col items-center">
                      <div
                        className={`w-10 h-10 rounded-full border-2 flex items-center justify-center transition-all duration-200 ${getStepColorClasses(section.color, status)}`}
                      >
                        {status === 'completed' ? (
                          <Check className="h-5 w-5" />
                        ) : (
                          <Icon className="h-4 w-4" />
                        )}
                      </div>
                      <span className="text-xs text-gray-500 mt-1 max-w-16 text-center leading-tight">
                        {section.shortName}
                      </span>
                    </div>
                    {index < sections.length - 1 && (
                      <div className={`w-8 h-0.5 ${
                        getStepStatus(index) === 'completed' ? 'bg-emerald-300' : 'bg-gray-200'
                      }`} />
                    )}
                  </React.Fragment>
                );
              })}
            </div>

            {/* 进度百分比 */}
            <div className="text-right">
              <div className="text-sm font-medium text-gray-900">
                {getCurrentIndex() + 1} / {sections.length}
              </div>
              <div className="text-xs text-gray-500">
                {Math.round(((getCurrentIndex() + 1) / sections.length) * 100)}% 完成
              </div>
            </div>
          </div>

          {/* 标签式导航 */}
          <div className="border-b border-gray-100">
            <nav className="flex space-x-1">
              {sections.map((section, index) => {
                const Icon = section.icon;
                const status = getStepStatus(index);
                
                return (
                  <button
                    key={section.id}
                    onClick={() => handleNavigate(section.id)}
                    className={`flex items-center space-x-2 px-4 py-3 rounded-t-lg border-b-2 font-medium text-sm transition-all duration-200 ${getTabColorClasses(section.color, status)}`}
                  >
                    <Icon className="h-4 w-4" />
                    <span>{section.name}</span>
                    {status === 'completed' && (
                      <Check className="h-3 w-3 text-emerald-500" />
                    )}
                  </button>
                );
              })}
            </nav>
          </div>
        </div>
      </header>

      {/* 主内容区域 */}
      <main className="flex-1">
        {renderCurrentSection()}
      </main>

      {/* 简化的底部导航 */}
      <footer className="bg-white border-t border-gray-200 mt-auto">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between py-4">
            <div className="flex-1">
              {getPrevSection() && (
                <button
                  onClick={() => handleNavigate(getPrevSection().id)}
                  className="inline-flex items-center text-gray-600 hover:text-gray-900 px-4 py-2 rounded-lg hover:bg-gray-50 transition-colors group"
                >
                  <ChevronLeft className="h-4 w-4 mr-1 group-hover:-translate-x-0.5 transition-transform" />
                  <span className="font-medium">{getPrevSection().name}</span>
                </button>
              )}
            </div>

            <div className="flex-1 flex justify-end">
              {getNextSection() && (
                <button
                  onClick={() => handleNavigate(getNextSection().id)}
                  className="inline-flex items-center text-gray-600 hover:text-gray-900 px-4 py-2 rounded-lg hover:bg-gray-50 transition-colors group"
                >
                  <span className="font-medium">{getNextSection().name}</span>
                  <ChevronRight className="h-4 w-4 ml-1 group-hover:translate-x-0.5 transition-transform" />
                </button>
              )}
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default WorkbenchMain; 